<!--tmd 阿里真是傻逼，文档写的一塌糊涂 弹幕功能待定-->
<template>
  <div>
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"
    />
    <script
      charset="utf-8"
      type="text/javascript"
      src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"
    ></script>
    <!-- 请下载之后使用 -->
    <!-- 阿里云视频播放器组件 -->
    <script
      charset="utf-8"
      src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"
    ></script>

    <!-- <script
      charset="utf-8"
      src="../../static/aliplayercomponents-1.0.3.min.js"
    ></script> -->
    <div class="player" id="videoPlayer"></div>
  </div>
</template>

<script>
import { send } from "q";
import course from "../../api/course";
export default {
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error,
  }) {
    let videoid = params.id;
    let resp = await course.getVideoAuth(videoid);
    let auths = resp.data.auth;

    return {
      videoid,
      auths,
    };
  },
  mounted() {
    const danmulist = [
      {
        mode: 1, // The type of the comment. For more information, visit https://github.com/jabbany/CommentCoreLibrary/blob/master/docs/CommentTypes.md.
        text: "我和你", // The text of the comment. Note: After a comment object is created, any modification to its text does not take effect.
        stime: 2000, // The time when the comment is displayed in the video. Unit: milliseconds. A value of 0 indicates that the comment immediately appears when the playback starts.
        size: 25, // The font size of the comment.
        color: 0xffffff, // The color of the text.
      },
    ];
    var player = new Aliplayer(
      {
        id: "videoPlayer",
        width: "100%",
        // height: "50%",
        autoplay: false,
        vid: this.videoid,
        playauth: this.auths,
        //跑马灯
        components: [
          {
            name: "BulletScreenComponent",
            type: AliPlayerComponent.BulletScreenComponent,
            args: [
              "澳门皇冠赌场",
              { fontSize: "16px", color: "#00c1de" },
              "random",
            ],
          },
          {
            name: "AliplayerDanmuComponent",
            type: AliPlayerComponent.AliplayerDanmuComponent,
            args: [danmulist],
            send,
          },
        ],
      },
      function(player) {
        let a = player.getComponent("AliplayerDanmuComponent");
        a.send("=============");
        send("==========");
        console.log("播放器创建好了。");
      }
    );
  },
  methods: {
    test() {
      let a = player.getComponent("AliplayerDanmuComponent");
      a.send("==========");
    },
  },
};
</script>

<style></style>
